<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Figma Design</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;900&family=Comfortaa:wght@400&family=SF+Pro+Text:wght@400;600&display=swap" rel="stylesheet">
    <style>
        /* Custom font families if needed */
        body {
            font-family: 'Roboto', sans-serif; /* Default font */
        }
        .font-comfortaa {
            font-family: 'Comfortaa', cursive;
        }
        .font-sf-pro {
            font-family: 'SF Pro Text', sans-serif;
        }
        /* Add custom styles based on Figma if Tailwind doesn't cover everything */
        /* Example: Specific gradient from Figma */
        .bg-custom-gradient {
            background: linear-gradient(to bottom right, #FF00D6, #FF4D00);
        }

       /* Preview Mode Toggle Styles */
       .landscape-mode .main-content-sections {
           display: flex;
           justify-content: space-around; /* Adjust as needed: space-between, space-evenly */
           align-items: flex-start; /* Align items to the top */
           flex-wrap: nowrap; /* Prevent wrapping by default */
           overflow-x: auto; /* Add scroll if content overflows */
           padding-bottom: 1rem; /* Add some padding at the bottom */
       }

       .landscape-mode #discover-section,
       .landscape-mode #search-section,
       .landscape-mode #chat-section {
           flex: 0 0 auto; /* Prevent growing/shrinking, use original width */
           width: 320px; /* Set a fixed width or adjust as needed */
           margin: 0 0.5rem; /* Add horizontal spacing */
           max-width: none; /* Override previous max-width */
       }

       .landscape-mode .fixed.bottom-0 {
            max-width: 800px; /* Match content width */
       }

       #toggle-mode-btn {
           position: fixed;
           top: 1rem;
           right: 1rem;
           padding: 0.5rem 1rem;
           background-color: #3b82f6; /* blue-500 */
           color: white;
           border: none;
           border-radius: 0.375rem; /* rounded-md */
           cursor: pointer;
           z-index: 50; /* Ensure it's above other content */
       }
       #toggle-mode-btn:hover {
           background-color: #2563eb; /* blue-600 */
       }
    </style>
</head>
<body class="bg-white">
    <button id="toggle-mode-btn">切换到横向</button>
    <!-- Content from Figma will be added here -->
    <div class="p-4">
        <h1 class="text-2xl font-bold mb-4">Figma Design Implementation</h1>
        <p>Content based on Figma design will be populated here.</p>
        <div class="main-content-sections">
            <!-- Discover Section -->
            <div id="discover-section" class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden mb-8">
            <!-- Status Bar -->
            <div class="px-4 py-1 flex justify-between items-center bg-white">
                <div class="font-sf-pro font-semibold text-sm text-black">9:27</div>
                <div class="flex items-center space-x-1">
                    <!-- Cell Signal Icon Placeholder -->
                    <svg class="w-4 h-4 text-black" fill="currentColor" viewBox="0 0 20 20"><path d="M17.5 2.5h-2.5a.5.5 0 00-.5.5v14a.5.5 0 00.5.5h2.5a.5.5 0 00.5-.5v-14a.5.5 0 00-.5-.5zM13.5 6.5h-2.5a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h2.5a.5.5 0 00.5-.5v-10a.5.5 0 00-.5-.5zM9.5 10.5h-2.5a.5.5 0 00-.5.5v6a.5.5 0 00.5.5h2.5a.5.5 0 00.5-.5v-6a.5.5 0 00-.5-.5zM5.5 14.5h-2.5a.5.5 0 00-.5.5v2a.5.5 0 00.5.5h2.5a.5.5 0 00.5-.5v-2a.5.5 0 00-.5-.5z"/></svg>
                    <!-- Wifi Icon Placeholder -->
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.33A11.95 11.95 0 0112 15c1.886 0 3.696.43 5.333 1.215M5.667 13.667A16.01 16.01 0 0112 12c2.48 0 4.84.56 6.889 1.58M3 11a20.02 20.02 0 0118 0"/></svg>
                    <!-- Battery Icon Placeholder -->
                    <div class="relative w-6 h-3 border border-black rounded-sm opacity-35">
                        <div class="absolute top-0 left-0 h-full bg-black rounded-sm" style="width: 70%;"></div>
                        <div class="absolute -right-1 top-1/2 transform -translate-y-1/2 w-0.5 h-1 bg-black opacity-40"></div>
                    </div>
                </div>
            </div>

            <!-- Main Content Area -->
            <div class="p-4">
                <!-- Header -->
                <h2 class="font-comfortaa text-4xl font-normal text-black mb-4">Discover</h2>

                <!-- What's new section -->
                <div class="flex justify-between items-center mb-3">
                    <h3 class="font-roboto font-black text-xs uppercase tracking-wider text-black">What’s new today</h3>
                    <a href="#" class="font-roboto font-black text-xs uppercase tracking-wider text-black">Browse all</a>
                </div>

                <!-- Image Grid with actual images -->
                <div class="grid grid-cols-3 gap-1 mb-4">
                    <div class="h-32 rounded overflow-hidden"><img src="assets/discover_img_1.png" alt="Discover image 1" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/discover_img_2.png" alt="Discover image 2" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/discover_img_3.png" alt="Discover image 3" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/discover_img_4.png" alt="Discover image 4" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/discover_img_5.png" alt="Discover image 5" class="w-full h-full object-cover"></div>
                </div>
            </div>

            <!-- Tab Bar for Discover Section -->
            <div class="bg-white border-t border-gray-300 shadow-[0px_-0.5px_0px_0px_rgba(0,0,0,0.3)] backdrop-blur-md mt-4">
                <div class="flex justify-around items-center h-16 px-2">
                    <!-- Home Icon Placeholder -->
                    <button class="text-gray-700 p-2">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/></svg>
                    </button>
                    <!-- Search Icon Placeholder -->
                    <button class="text-gray-700 p-2">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </button>
                    <!-- Upload Button Placeholder -->
                    <button class="p-2">
                        <div class="w-10 h-10 rounded-full bg-custom-gradient flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
                        </div>
                    </button>
                    <!-- Chats Icon Placeholder -->
                    <button class="text-gray-700 p-2">
                         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                    </button>
                    <!-- Profile Icon Placeholder -->
                    <button class="text-gray-700 p-2">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    </button>
                </div>
                 <!-- Bottom Shape -->
                 <div class="h-1 w-32 bg-black rounded-full mx-auto mb-2"></div>
            </div>
        </div>

        <!-- Search Section -->
        <div id="search-section" class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden mb-8">
            <!-- Status Bar (Similar to Discover Section) -->
            <div class="px-4 py-1 flex justify-between items-center bg-white">
                <div class="font-sf-pro font-semibold text-sm text-black">9:27</div>
                <div class="flex items-center space-x-1">
                    <!-- Icons Placeholder -->
                    <svg class="w-4 h-4 text-black" fill="currentColor" viewBox="0 0 20 20"><path d="M17.5 2.5h-2.5a.5.5 0 00-.5.5v14a.5.5 0 00.5.5h2.5a.5.5 0 00.5-.5v-14a.5.5 0 00-.5-.5zM13.5 6.5h-2.5a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h2.5a.5.5 0 00.5-.5v-10a.5.5 0 00-.5-.5zM9.5 10.5h-2.5a.5.5 0 00-.5.5v6a.5.5 0 00.5.5h2.5a.5.5 0 00.5-.5v-6a.5.5 0 00-.5-.5zM5.5 14.5h-2.5a.5.5 0 00-.5.5v2a.5.5 0 00.5.5h2.5a.5.5 0 00.5-.5v-2a.5.5 0 00-.5-.5z"/></svg>
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.33A11.95 11.95 0 0112 15c1.886 0 3.696.43 5.333 1.215M5.667 13.667A16.01 16.01 0 0112 12c2.48 0 4.84.56 6.889 1.58M3 11a20.02 20.02 0 0118 0"/></svg>
                    <div class="relative w-6 h-3 border border-black rounded-sm opacity-35">
                        <div class="absolute top-0 left-0 h-full bg-black rounded-sm" style="width: 70%;"></div>
                        <div class="absolute -right-1 top-1/2 transform -translate-y-1/2 w-0.5 h-1 bg-black opacity-40"></div>
                    </div>
                </div>
            </div>

            <!-- Main Content Area -->
            <div class="p-4">
                <!-- Header -->
                <h2 class="font-comfortaa text-4xl font-normal text-black mb-4">Search</h2>

                <!-- Search Input -->
                <div class="mb-4">
                    <input type="text" value="dogs" class="w-full px-4 py-2 border-2 border-black rounded font-roboto text-sm text-black"/>
                </div>

                <!-- Results Header -->
                <div class="flex justify-between items-center mb-3">
                    <h3 class="font-roboto font-black text-xs uppercase tracking-wider text-black">all results</h3>
                </div>

                <!-- Image Grid with actual images -->
                <div class="grid grid-cols-3 gap-1 mb-4">
                    <div class="h-32 rounded overflow-hidden"><img src="assets/search_img_1.png" alt="Search image 1" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/search_img_2.png" alt="Search image 2" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/search_img_3.png" alt="Search image 3" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/search_img_4.png" alt="Search image 4" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/search_img_5.png" alt="Search image 5" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/search_img_6.png" alt="Search image 6" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/search_img_7.png" alt="Search image 7" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/search_img_8.png" alt="Search image 8" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/search_img_9.png" alt="Search image 9" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/search_img_10.png" alt="Search image 10" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/search_img_11.png" alt="Search image 11" class="w-full h-full object-cover"></div>
                    <div class="h-32 rounded overflow-hidden"><img src="assets/search_img_12.png" alt="Search image 12" class="w-full h-full object-cover"></div>
                </div>
            </div>

            <!-- Tab Bar for Search Section -->
            <div class="bg-white border-t border-gray-300 shadow-[0px_-0.5px_0px_0px_rgba(0,0,0,0.3)] backdrop-blur-md mt-4">
                 <div class="flex justify-around items-center h-16 px-2">
                    <!-- Icons Placeholder -->
                    <button class="text-gray-700 p-2">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/></svg>
                    </button>
                    <button class="text-gray-700 p-2">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </button>
                    <button class="p-2">
                        <div class="w-10 h-10 rounded-full bg-custom-gradient flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
                        </div>
                    </button>
                    <button class="text-gray-700 p-2">
                         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                    </button>
                    <button class="text-gray-700 p-2">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    </button>
                </div>
                 <!-- Bottom Shape -->
                 <div class="h-1 w-32 bg-black rounded-full mx-auto mb-2"></div>
            </div>
        </div>

        <!-- Individual Chat Section -->
        <div id="chat-section" class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden mb-8 pb-20"> <!-- Added padding-bottom to avoid overlap with fixed tab bar -->
            <!-- Status Bar (Similar to Discover/Search Section) -->
            <div class="px-4 py-1 flex justify-between items-center bg-white">
                 <div class="font-sf-pro font-semibold text-sm text-black">9:27</div>
                 <div class="flex items-center space-x-1">
                     <!-- Icons Placeholder -->
                     <svg class="w-4 h-4 text-black" fill="currentColor" viewBox="0 0 20 20"><path d="M17.5 2.5h-2.5a.5.5 0 00-.5.5v14a.5.5 0 00.5.5h2.5a.5.5 0 00.5-.5v-14a.5.5 0 00-.5-.5zM13.5 6.5h-2.5a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h2.5a.5.5 0 00.5-.5v-10a.5.5 0 00-.5-.5zM9.5 10.5h-2.5a.5.5 0 00-.5.5v6a.5.5 0 00.5.5h2.5a.5.5 0 00.5-.5v-6a.5.5 0 00-.5-.5zM5.5 14.5h-2.5a.5.5 0 00-.5.5v2a.5.5 0 00.5.5h2.5a.5.5 0 00.5-.5v-2a.5.5 0 00-.5-.5z"/></svg>
                     <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.33A11.95 11.95 0 0112 15c1.886 0 3.696.43 5.333 1.215M5.667 13.667A16.01 16.01 0 0112 12c2.48 0 4.84.56 6.889 1.58M3 11a20.02 20.02 0 0118 0"/></svg>
                     <div class="relative w-6 h-3 border border-black rounded-sm opacity-35">
                         <div class="absolute top-0 left-0 h-full bg-black rounded-sm" style="width: 70%;"></div>
                         <div class="absolute -right-1 top-1/2 transform -translate-y-1/2 w-0.5 h-1 bg-black opacity-40"></div>
                     </div>
                 </div>
            </div>

            <!-- Navigation Bar -->
            <div class="px-4 py-3 flex items-center bg-white shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.3)] backdrop-blur-md">
                <button class="text-black mr-4">
                    <!-- Back Chevron Icon Placeholder -->
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                </button>
                <h2 class="font-sf-pro font-semibold text-base text-black text-center flex-grow">James</h2>
                <!-- Placeholder for potential right-side icons/buttons -->
                <div class="w-6"></div> <!-- Spacer to balance the back button -->
            </div>

            <!-- Chat Messages Area -->
            <div class="p-4 space-y-4">
                <!-- Received Message 1 -->
                    <div class="flex items-start space-x-2">
                    <img src="assets/chat_avatar_1.png" alt="Chat avatar" class="w-8 h-8 rounded-full flex-shrink-0">
                    <div class="bg-gray-100 p-3 rounded-r-lg rounded-bl-lg max-w-xs">
                        <p class="font-roboto text-sm text-black leading-relaxed">
                            Really love your most recent photo. I’ve been trying to capture the same thing for a few months and would love some tips!
                        </p>
                    </div>
                </div>

                <!-- Sent Message -->
                <div class="flex items-start justify-end space-x-2">
                    <div class="bg-gray-100 p-3 rounded-l-lg rounded-br-lg max-w-xs" style="background-color: rgba(0, 0, 0, 0.03);">
                        <p class="font-roboto font-medium text-sm leading-relaxed" style="color: #8E1DE8;">
                            A fast 50mm like f1.8 would help with the bokeh. I’ve been using primes as they tend to get a bit sharper images.
                        </p>
                    </div>
                     <div class="w-8 h-8 rounded-full bg-gray-400 flex-shrink-0"></div> <!-- Avatar Placeholder -->
                </div>

                 <!-- Received Message 2 -->
                 <div class="flex items-start space-x-2">
                    <img src="assets/chat_avatar_1.png" alt="Chat avatar" class="w-8 h-8 rounded-full flex-shrink-0">
                    <div class="bg-gray-100 p-3 rounded-r-lg rounded-bl-lg max-w-xs">
                        <p class="font-roboto font-medium text-sm leading-relaxed" style="color: #D82E57;">
                            Thank you! That was very helpful!
                        </p>
                    </div>
                </div>
            </div>

            <!-- Tab Bar for Chat Section -->
             <div class="bg-white border-t border-gray-300 shadow-[0px_-0.5px_0px_0px_rgba(0,0,0,0.3)] backdrop-blur-md mt-4">
                 <div class="flex justify-around items-center h-16 px-2">
                    <!-- Icons Placeholder -->
                    <button class="text-gray-700 p-2">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/></svg>
                    </button>
                    <button class="text-gray-700 p-2">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                    </button>
                    <button class="p-2">
                        <div class="w-10 h-10 rounded-full bg-custom-gradient flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
                        </div>
                    </button>
                    <button class="text-gray-700 p-2">
                         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                    </button>
                    <button class="text-gray-700 p-2">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    </button>
                </div>
                 <!-- Bottom Shape -->
                 <div class="h-1 w-32 bg-black rounded-full mx-auto mb-2"></div>
            </div>
        </div>
        </div> <!-- Close main-content-sections -->
    </div>

    <script>
        const toggleBtn = document.getElementById('toggle-mode-btn');
        const body = document.body;

        toggleBtn.addEventListener('click', () => {
            body.classList.toggle('landscape-mode');
            if (body.classList.contains('landscape-mode')) {
                toggleBtn.textContent = '切换到纵向';
            } else {
                toggleBtn.textContent = '切换到横向';
            }
        });
    </script>
</body>
</html>